  // 顶部添加模块导入
  @use "sass:map";
  @use "@/styles/variables" as *;
  @use "@/styles/mixins" as *;



  #app {
    min-height: 100vh;
    padding-top: 70px;
    width: 100%;
    display: flex;
    flex-direction: column;
    background: var(--background);
  }


  @font-face {
    font-family: 'font';
    src: url('@/assets/font/2.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
  }


  .underline {
    position: relative;
    &::after {
      content: "";
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 1px;
      background-color: $primary;
      transform: scaleX(0);
      transition: transform 0.25s ease;
    }

    &:hover {
      &::after {
        transform: scaleX(1);
      }
    }
  }


  .app-content {
    min-height: calc(100vh - 80px);
    width: 100%;
  }

  /* 全局滚动条样式 */
  ::-webkit-scrollbar {
    width: 8px;  /* 稍微调窄一点 */
    height: 8px;
  }

  ::-webkit-scrollbar-track {
    background: transparent;
  }

  ::-webkit-scrollbar-thumb {
    background: rgba($primary, 0.8);  /* 增加不透明度 */
    transition: all 0.3s ease;
    border-radius: 10px;

    &:hover {
      background: $primary;  /* 悬浮时完全不透明 */
    }
  }

  /* 深色模式滚动条 */
  :root[data-theme='dark'] {
    ::-webkit-scrollbar-thumb {
      background: rgba($primary, 0.6);  /* 深色模式下的基础颜色 */

      &:hover {
        background: rgba($primary, 0.8);  /* 深色模式下悬浮颜色 */
      }
    }

    /* 代码块滚动条特殊处理 */
    pre::-webkit-scrollbar-thumb {
      background: rgba(255, 255, 255, 0.3);  /* 代码块中使用浅色滚动条 */

      &:hover {
        background: rgba(255, 255, 255, 0.5);
      }
    }
  }




  /* Header 相关的所有元素应用字体 */
  .header,
  .header *,
  .nav,
  .nav *,
  .menu,
  .menu *,
  .dropdown,
  .dropdown *,
  .dropdown-menu,
  .dropdown-menu *,
  .nav-item,
  .nav-link,
  .header-title,
  .logo-text,
  .menu-item {
    font-family: "font" !important;
  }

  /* 添加图标特殊规则 */
  .fa,
  .fas,
  .far,
  .fab {
    font-family: 'Font Awesome 5 Free' !important;
  }

  .fab {
    font-family: 'Font Awesome 5 Brands' !important;
  }

  .scroll-disabled{
    overflow: hidden !important;
  }

  /* 鼠标点击效果容器 */
  .cursor-container {
    pointer-events: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
  }

  /* 鼠标点击效果 */
  .cursor-fx {
    pointer-events: none;
    position: fixed;
    width: 20px;
    height: 20px;
    border: 2px solid $primary;
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0);
    animation: cursorFx 0.5s ease-out forwards;
  }

  @keyframes cursorFx {
    0% {
      transform: translate(-50%, -50%) scale(0);
      opacity: 1;
    }
    50% {
      transform: translate(-50%, -50%) scale(1.5);
      opacity: 0.5;
    }
    100% {
      transform: translate(-50%, -50%) scale(2);
      opacity: 0;
    }
  }

  ::selection {
    background-color: #45bcd1 !important;
    color: #fff;
  }

  ::-moz-selection {
    background-color: #45bcd1 !important;
    color: #fff;
  }

  ::-webkit-selection {
    background-color: #45bcd1 !important;
    color: #fff;
  }





  // 然后定义 CSS 变量
  :root {
    --text-primary: #{$text-primary};
    --text-secondary: #{$text-secondary};
    --background: #{$background};
    --surface: #{$surface};
    --border-color: #{map.get($dark, 'border')}; // 使用 map.get
    --card-bg: #{$surface};
    --loading-bg: #{$loading-bg};
    --hover-bg: #{rgba($primary, 0.1)};
    --input-bg: #{$surface};
    --surface-rgb: 255, 255, 255;
    --border-color-rgb: 0, 0, 0;
    --about-me: linear-gradient(135deg, #409efff2, #a855f7f2);
    --reply-message-bg: #f9f6f6;
    --resources-bg: linear-gradient(135deg, #f8faff 0%, #f1f5ff 100%);
  }

  :root[data-theme='dark'] {
    --text-primary: #{map.get($dark, 'text-primary')}; // 使用 map.get
    --text-secondary: #{map.get($dark, 'text-secondary')};
    --background: #{map.get($dark, 'background')};
    --surface: #{map.get($dark, 'surface')};
    --border-color: #{map.get($dark, 'border')};
    --card-bg: #{map.get($dark, 'surface')};
    --hover-bg: #{map.get($dark, 'hover-bg')};
    --input-bg: #{map.get($dark, 'surface')};
    --loading-bg: #{map.get($dark, 'loading-bg')};
    --surface-rgb: 17, 25, 39;
    --border-color-rgb: 255, 255, 255;
    --about-me: linear-gradient(135deg, #1f2937, #000000);
    --reply-message-bg: #333;
    --resources-bg: linear-gradient(135deg, #1f2937 0%, #000000 100%);
  }
